<template>
    <div class="bottom-nav">
        <div class="nav-icon">
            <MenuIcon v-for="(item, index) in navData" :key="index" class="icon" :title="item.title" />
        </div>
    </div>
</template>

<script setup lang="ts">
import MenuIcon from '../navIcon/MenuIcon.vue';

const navData = [
    {
        title: '首页'
    },
    { 
        title: "笔记" 
    },
    { 
        title: '工具' 
    },
    { 
        title: '呦西' 
    },
    { 
        title: '用户' 
    }]
</script>

<style lang="scss" scoped>
@font-face {
    font-family: 'zhimang';
    src: url("../../assets/fonts/钟齐志莽行书.ttf") format('woff2');
    font-weight: normal;
    font-style: normal;
}

.bottom-nav {
    position: absolute;
    bottom: 1.25rem;
    width: 37.5rem;
    height: 2.5rem;
    border-radius: .3125rem;
    background-color: rgba($color: #57A9FB, $alpha: 0.3);
    box-shadow: 0rem 0rem 1.25rem rgba($color: #208CD9, $alpha: 1);
    left: 50%;
    transform: translateX(-50%);

    .nav-icon {
        width: 37.5rem;
        height: 2.5rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-around;

        .icon {
            width: 3.125rem;
            height: 2.5rem;
            margin-top: -1.5625rem;
            font-family: "zhimang",sans-serif;
            font-size: 18px;
        }
    }
}
</style>